<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>谭兴文 - 搜索引擎</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #f8f9fa;
            color: #202124;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            padding: 20px 0;
        }
        
        .logo {
            font-size: 5rem;
            font-weight: bold;
            color: #4285f4;
            margin-bottom: 20px;
        }
        
        .logo span:nth-child(1) { color: #4285f4; }
        .logo span:nth-child(2) { color: #ea4335; }
        .logo span:nth-child(3) { color: #fbbc05; }
        .logo span:nth-child(4) { color: #4285f4; }
        .logo span:nth-child(5) { color: #34a853; }
        .logo span:nth-child(6) { color: #ea4335; }
        
        .search-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 40px 0;
        }
        
        .search-box {
            display: flex;
            width: 100%;
            max-width: 600px;
            margin-bottom: 30px;
        }
        
        .search-input {
            flex: 1;
            padding: 15px 20px;
            font-size: 16px;
            border: 1px solid #dfe1e5;
            border-radius: 24px 0 0 24px;
            outline: none;
            box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
        }
        
        .search-input:focus {
            box-shadow: 0 1px 10px rgba(32, 33, 36, 0.4);
        }
        
        .search-button {
            padding: 15px 25px;
            background-color: #4285f4;
            color: white;
            border: none;
            border-radius: 0 24px 24px 0;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        
        .search-button:hover {
            background-color: #357ae8;
        }
        
        .result-container {
            display: none;
            text-align: center;
            margin-top: 50px;
            padding: 30px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
        }
        
        .result-text {
            font-size: 2.5rem;
            font-weight: bold;
            color: #ea4335;
            line-height: 1.4;
            margin: 20px 0;
        }
        
        .try-again {
            margin-top: 30px;
            padding: 10px 20px;
            background-color: #34a853;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        footer {
            margin-top: auto;
            text-align: center;
            padding: 20px;
            color: #70757a;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <span>谭</span><span>兴</span><span>文</span>
            </div>
            <h1>谭兴文搜索引擎</h1>
        </header>
        
        <div class="search-container">
            <form id="search-form" class="search-box">
                <input type="text" class="search-input" placeholder="请输入搜索内容..." autocomplete="off">
                <button type="submit" class="search-button">搜索</button>
            </form>
        </div>
        
        <div id="result" class="result-container">
            <div class="result-text">西大附中的学生四大力学都会了。</div>
            <button class="try-again" onclick="hideResult()">再次搜索</button>
        </div>
    </div>
    
    <footer>
        <p>© 2023 谭兴文搜索引擎 - 今天你学四大力学了吗</p>
    </footer>

    <script>
        document.getElementById('search-form').addEventListener('submit', function(e) {
            e.preventDefault();
            document.getElementById('result').style.display = 'block';
            document.querySelector('.search-container').style.display = 'none';
        });
        
        function hideResult() {
            document.getElementById('result').style.display = 'none';
            document.querySelector('.search-container').style.display = 'flex';
            document.querySelector('.search-input').value = '';
            document.querySelector('.search-input').focus();
        }
    </script>
</body>
</html>